<template>
    <div class="logistics-layout-form">
        <div class="author-demo">
            <div>作者：谢鹏</div>
            <div>日期：2017/11/14</div>
        </div>
        <section>
            <h3>一行三列</h3>
            <p style="color: #f00">宽度未做限制，一行最多3列，放不下则换行</p>
            <Form :label-width="120" grid="3">
                <div class="">
                    <Form-item label="仓库：">
                        <Select class="ivu-form-item-width" clearable filterable label-in-value placeholder="请选择仓库">
                            <Option value="0">编号</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="货主：">
                        <Input class="ivu-form-item-width" placeholder="请输入..."/>
                    </Form-item>
                    <Form-item label="预计发货时间：">
                        <Date-picker class="ivu-form-item-width" type="datetime" placeholder="选择日期" formate="yyyy-MM-dd HH:mm:ss"></Date-picker>
                    </Form-item>
                    <br />
                    <Form-item label="描述：" prop="remark">
                        <Input class="ivu-form-item-width-2xl" type="textarea" placeholder="请输入..." :rows="4" />
                    </Form-item>
                </div>
            </Form>
            <pre style="background-color: #ececec;">
                <code class="html" v-text="htmlCode1">
                </code>
            </pre>

        </section>

        <section>
            <h3>一行两列</h3>
            <p style="color: #f00">包含特殊小标题，提交按钮靠右等</p>
            <Form :label-width="100" grid="2">
                <div class="zlst-form-head-primary"><span>基本信息</span></div>
                <Form-item label="机构代码">
                    <Input class="ivu-form-item-width" placeholder="请输入机构代码"></Input>
                </Form-item>
                <Form-item label="所属组织" prop="companyId">
                    <Select class="ivu-form-item-width" clearable placeholder="请选择所属组织">
                        <Option value="中铝集团1">中铝集团1</Option>
                        <Option value="中铝集团2">中铝集团2</Option>
                        <Option value="中铝集团3">中铝集团3</Option>
                    </Select>
                </Form-item>

                <div class="ivu-form-grid-0">
                    <Form-item label="所在区域">
                        <Form-item>
                            <Select class="ivu-form-item-width-xs" placeholder="省">
                                <Option :value="'value1'">label1</Option>
                            </Select>
                        </Form-item>
                        <Form-item>
                            <Select class="ivu-form-item-width-xs" placeholder="市">
                                <Option :value="'value1'">label1</Option>
                            </Select>
                        </Form-item>
                        <Form-item>
                            <Select class="ivu-form-item-width-xs" placeholder="区">
                                <Option :value="'value1'">label1</Option>
                            </Select>
                        </Form-item>
                        <Form-item>
                            <Input placeholder="街道" class="ivu-form-item-width-l"></Input>
                        </Form-item>
                    </Form-item>
                </div>

                <div class="zlst-form-head-primary"><span>开票信息</span></div>
                <Form-item label="纳税人电话">
                    <Input class="ivu-form-item-width" placeholder="请输入纳税人电话"></Input>
                </Form-item>
                <Form-item label="开户行">
                    <Select class="ivu-form-item-width" clearable filterable>
                        <Option value="value">label</Option>
                    </Select>
                </Form-item>
                <Form-item label="开户账号">
                    <Input class="ivu-form-item-width" placeholder="请输入开户账号"></Input>
                </Form-item>
                <div class="zlst-form-head-primary"><span>联系人信息</span></div>
                <Form-item label="联系人姓名">
                    <Input class="ivu-form-item-width" placeholder="请输入联系人信息"></Input>
                </Form-item>
                <Form-item label="手机号码">
                    <Input class="ivu-form-item-width" placeholder="请输入手机号码"></Input>
                </Form-item>
                <Form-item label="性别">
                    <Radio-group>
                        <Radio label="1">男</Radio>
                        <Radio label="0">女</Radio>
                    </Radio-group>
                </Form-item>

                <div class="">
                    <Button><label style="color: red;margin-right: 5px;">*</label>上传证件</Button>
                    <br />
                    <span class="zlst-tips-primary">提示：法人身份证上传两面;图片格式为png,jpg,jpeg,大小不要超过2M</span>
                </div>

                <Form-item :label-width="10">
                    <Form-item>
                        <Upload action="">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传营业执照</Button>
                        </Upload>
                        <div class="zlst-form-item-image-wrap">
                            <img class="zlst-form-item-image-thumb" src="http://192.168.10.235:8888//group1/M00/00/08/wKgK9lnFvG6AIa_mAAH89q-4VdM173.jpg" />
                            <div class="zlst-form-item-image-zoom">
                                <img src="http://192.168.10.201:6501/static/img/timg.d2f7788.png" />
                            </div>
                        </div>
                    </Form-item>
                    <Form-item>
                        <Upload action="">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传营业执照</Button>
                        </Upload>
                        <div class="zlst-form-item-image-wrap">
                            <img class="zlst-form-item-image-thumb" src="http://192.168.10.235:8888//group1/M00/00/08/wKgK9lnFvG6AIa_mAAH89q-4VdM173.jpg" />
                            <div class="zlst-form-item-image-zoom">
                                <img src="http://192.168.10.201:6501/static/img/timg.d2f7788.png" />
                            </div>
                        </div>
                    </Form-item>
                    <Form-item>
                        <Upload action="">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传营业执照</Button>
                        </Upload>
                        <div class="zlst-form-item-image-wrap">
                            <img class="zlst-form-item-image-thumb" src="http://192.168.10.235:8888//group1/M00/00/08/wKgK9lnFvG6AIa_mAAH89q-4VdM173.jpg" />
                            <div class="zlst-form-item-image-zoom">
                                <img src="http://192.168.10.201:6501/static/img/timg.d2f7788.png" />
                            </div>
                        </div>
                    </Form-item>
                    <Form-item>
                        <Upload action="">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传营业执照</Button>
                        </Upload>
                        <div class="zlst-form-item-image-wrap">
                            <img class="zlst-form-item-image-thumb" src="http://192.168.10.235:8888//group1/M00/00/08/wKgK9lnFvG6AIa_mAAH89q-4VdM173.jpg" />
                            <div class="zlst-form-item-image-zoom">
                                <img src="http://192.168.10.201:6501/static/img/timg.d2f7788.png" />
                            </div>
                        </div>
                    </Form-item>
                </Form-item>

                <div class="zlst-form-operate">
                    <Button type="info">保存草稿</Button>
                    <Button type="success">提交</Button>
                    <Button type="warning">取消</Button>
                </div>
            </Form>
            <pre style="background-color: #ececec;">
                <code class="html" v-text="htmlCode2">
                </code>
            </pre>

        </section>

        <section>
            <h3>一行一列/左右结构</h3>
            <p style="color: #f00">左边表单，右边可自由放置其他内容。且一个label可对应多个表单元素</p>
            <Row>
                <Col span="12">
                    <Form :label-width="80">
                        <FormItem label="名称">
                            <Input class="ivu-form-item-width-l" placeholder="请输入名称"></Input>
                        </FormItem>

                        <div class="ivu-form-grid-0">
                            <FormItem label="起点">
                                <Form-item>
                                    <Select class="ivu-form-item-width-xs" placeholder="省">
                                        <Option :value="'value1'">label1</Option>
                                    </Select>
                                </Form-item>
                                <Form-item>
                                    <Select class="ivu-form-item-width-xs" placeholder="市">
                                        <Option :value="'value1'">label1</Option>
                                    </Select>
                                </Form-item>
                                <Form-item>
                                    <Select class="ivu-form-item-width-xs" placeholder="区">
                                        <Option :value="'value1'">label1</Option>
                                    </Select>
                                </Form-item>
                                <Form-item>
                                    <Input placeholder="街道" class="ivu-form-item-width-l"></Input>
                                </Form-item>
                            </FormItem>
                        </div>

                        <FormItem label="里程数">
                            <Input class="ivu-form-item-width-l" placeholder="请输入"></Input>
                        </FormItem>
                        <FormItem label="高速">
                            <Select class="ivu-form-item-width-l" clearable placeholder="选择">
                                <Option value="1">是</Option>
                                <Option value="0">否</Option>
                            </Select>
                        </FormItem>
                        <FormItem class="ivu-form-item-width-l" label="备注">
                            <Input class="ivu-form-item-width-l" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
                        </FormItem>
                        <div class="zlst-form-operate">
                            <Button type="primary">保存</Button>
                            <Button type="warning">取消</Button>
                        </div>
                    </Form>
                </Col>
            </Row>
            <pre style="background-color: #ececec;">
                <code class="html" v-text="htmlCode3">
                </code>
            </pre>

        </section>

        <section>
            <h3>其他</h3>
            <Form :label-width="120" grid="3">
                <div class="ivu-form-grid-1">
                    <Form-item label="车辆归属:">
                        <Radio-group type="button">
                            <Radio label="1">自有</Radio>
                            <Radio label="3">个人</Radio>
                            <Radio label="2">承运商</Radio>
                        </Radio-group>
                    </Form-item>
                    <Form-item label="服务单位:">
                        <Select clearable class="ivu-form-item-width-l">
                            <Option value="value">label</Option>
                        </Select>
                    </Form-item>
                </div>

                <div class="ivu-form-grid-0">
                    <Form-item label="基本参数:">
                        <Form-item>
                            <Input class="ivu-form-item-width-xs" placeholder="额定体积(m3)"></Input>
                        </Form-item>
                        <Form-item :label-width="10">
                            <Input class="ivu-form-item-width-xs" placeholder="额定载重(t)"></Input>
                        </Form-item>
                        <Form-item :label-width="10">
                            <Input class="ivu-form-item-width-xs" placeholder="车长(m)"></Input>
                        </Form-item>
                    </Form-item>
                </div>

                <Button>更多信息</Button>

                <div class="ivu-form-grid-0 car-color">
                    <form-item label="车身颜色:">
                        <Radio-group>
                            <Radio label="白色">
                                <div class="circle1"></div>
                            </Radio>
                            <Radio label="蓝色">
                                <div class="circle2"></div>
                            </Radio>
                            <Radio label="红色">
                                <div class="circle3"></div>
                            </Radio>
                            <Radio label="橙色">
                                <div class="circle4"></div>
                            </Radio>
                            <Radio label="灰色">
                                <div class="circle5"></div>
                            </Radio>
                            <Radio label="金色">
                                <div class="circle6"></div>
                            </Radio>
                            <Radio label="黑色">
                                <div class="circle7"></div>
                            </Radio>
                            <Radio label="褐色">
                                <div class="circle8"></div>
                            </Radio>
                            <Radio label="绿色">
                                <div class="circle9"></div>
                            </Radio>
                            <Radio label="其他">
                                <div class="circle10">其他</div>
                            </Radio>
                        </Radio-group>
                    </form-item>
                    <br>
                    <form-item label="车厢尺寸(M):">
                        <Form-item>
                            <Input placeholder="长(米)"></Input>
                        </Form-item>
                        <Form-item>
                            <Input placeholder="宽(米)"></Input>
                        </Form-item>
                        <Form-item>
                            <Input placeholder="高(米)"></Input>
                        </Form-item>
                    </form-item>
                </div>

                <div class="ivu-form-grid-3">
                    <Form-item label="车架号:">
                        <Input class="ivu-form-item-width" placeholder="请输入"></Input>
                    </Form-item>
                    <Form-item label="准运种类:">
                        <Select class="ivu-form-item-width" clearable>
                            <Option value="value">label</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="整备质量(Kg):">
                        <Input class="ivu-form-item-width" placeholder="请输入"></Input>
                    </Form-item>
                    <Form-item label="发动机功率(匹):">
                        <Input class="ivu-form-item-width" placeholder="请输入"></Input>
                    </Form-item>
                    <Form-item label="燃料类型:">
                        <Select class="ivu-form-item-width" clearable>
                            <Option value="value">label</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="定位系统:">
                        <Radio-group type="button">
                            <Radio label="0">GPS</Radio>
                            <Radio label="1">北斗</Radio>
                        </Radio-group>
                    </Form-item>
                    <br>
                    <Form-item label="设备编号:">
                        <Input class="ivu-form-item-width" placeholder="请输入"></Input>
                    </Form-item>
                    <Form-item label="默认挂车:">
                        <Select class="ivu-form-item-width" clearable>
                            <Option value="licensePlateNumber">licensePlateNumber</Option>
                        </Select>
                    </Form-item>
                </div>

                <div class="ivu-form-grid-2">
                    <Form-item label="主驾司机:">
                        <Select class="ivu-form-item-width">
                            <Option value="value">label</Option>
                        </Select>
                    </Form-item>
                    <Form-item clearable label="主驾司机手机号:">
                        <Input class="ivu-form-item-width" placeholder="请输入电话"></Input>
                    </Form-item>
                    <Form-item label="副驾司机:">
                        <Select class="ivu-form-item-width">
                            <Option value="value">label</Option>
                        </Select>
                    </Form-item>
                    <Form-item clearable label="副驾司机手机号:">
                        <Input class="ivu-form-item-width" placeholder="请输入电话"></Input>
                    </Form-item>
                </div>

                <Button><label style="color: red;margin-right: 5px;">*</label>上传证件</Button>
                <Form-item :label-width="10">
                    <Form-item>
                        <Upload action="">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传营业执照</Button>
                        </Upload>
                        <div class="zlst-form-item-image-wrap">
                            <img class="zlst-form-item-image-thumb" src="http://192.168.10.235:8888//group1/M00/00/08/wKgK9lnFvG6AIa_mAAH89q-4VdM173.jpg" />
                            <div class="zlst-form-item-image-zoom">
                                <img src="http://192.168.10.201:6501/static/img/timg.d2f7788.png" />
                            </div>
                        </div>
                    </Form-item>
                    <Form-item>
                        <Upload action="">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传营业执照</Button>
                        </Upload>
                        <div class="zlst-form-item-image-wrap">
                            <img class="zlst-form-item-image-thumb" src="http://192.168.10.235:8888//group1/M00/00/08/wKgK9lnFvG6AIa_mAAH89q-4VdM173.jpg" />
                            <div class="zlst-form-item-image-zoom">
                                <img src="http://192.168.10.201:6501/static/img/timg.d2f7788.png" />
                            </div>
                        </div>
                    </Form-item>
                    <Form-item>
                        <Upload action="">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传营业执照</Button>
                        </Upload>
                        <div class="zlst-form-item-image-wrap">
                            <img class="zlst-form-item-image-thumb" src="http://192.168.10.235:8888//group1/M00/00/08/wKgK9lnFvG6AIa_mAAH89q-4VdM173.jpg" />
                            <div class="zlst-form-item-image-zoom">
                                <img src="http://192.168.10.201:6501/static/img/timg.d2f7788.png" />
                            </div>
                        </div>
                    </Form-item>
                </Form-item>
                <div class="zlst-form-operate">
                    <Button type="primary">保存草稿</Button>
                    <Button type="success">提交</Button>
                    <Button type="warning">重置</Button>
                </div>
            </Form>
            <pre style="background-color: #ececec;">
                <code class="html" v-text="htmlCode4">
                </code>
            </pre>

        </section>

    </div>
</template>

<script>
    import hljs from 'highlight.js'
    export default {
        data () {
            return {
                htmlCode1:`<Form :label-width="120" grid="3">
                <div class="">
                    <Form-item label="仓库：">
                        <Select class="ivu-form-item-width" clearable filterable label-in-value placeholder="请选择仓库">
                            <Option value="0">编号</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="货主：">
                        <Input class="ivu-form-item-width" placeholder="请输入..."/>
                    </Form-item>
                    <Form-item label="预计发货时间：">
                        <Date-picker class="ivu-form-item-width" type="datetime" placeholder="选择日期" formate="yyyy-MM-dd HH:mm:ss"></Date-picker>
                    </Form-item>
                    <br />
                    <Form-item label="描述：" prop="remark">
                        <Input class="ivu-form-item-width-2xl" type="textarea" placeholder="请输入..." :rows="4" />
                    </Form-item>
                </div>
            </Form>`,

            htmlCode2:`<Form :label-width="100" grid="2">
                <div class="zlst-form-head-primary"><span>基本信息</span></div>
                <Form-item label="机构代码">
                    <Input class="ivu-form-item-width" placeholder="请输入机构代码"></Input>
                </Form-item>
                <Form-item label="所属组织" prop="companyId">
                    <Select class="ivu-form-item-width" clearable placeholder="请选择所属组织">
                        <Option value="中铝集团1">中铝集团1</Option>
                        <Option value="中铝集团2">中铝集团2</Option>
                        <Option value="中铝集团3">中铝集团3</Option>
                    </Select>
                </Form-item>

                <div class="ivu-form-grid-0">
                    <Form-item label="所在区域">
                        <Form-item>
                            <Select class="ivu-form-item-width-xs" placeholder="省">
                                <Option :value="'value1'">label1</Option>
                            </Select>
                        </Form-item>
                        <Form-item>
                            <Select class="ivu-form-item-width-xs" placeholder="市">
                                <Option :value="'value1'">label1</Option>
                            </Select>
                        </Form-item>
                        <Form-item>
                            <Select class="ivu-form-item-width-xs" placeholder="区">
                                <Option :value="'value1'">label1</Option>
                            </Select>
                        </Form-item>
                        <Form-item>
                            <Input placeholder="街道" class="ivu-form-item-width-l"></Input>
                        </Form-item>
                    </Form-item>
                </div>

                <div class="zlst-form-head-primary"><span>开票信息</span></div>
                <Form-item label="纳税人电话">
                    <Input class="ivu-form-item-width" placeholder="请输入纳税人电话"></Input>
                </Form-item>
                <Form-item label="开户行">
                    <Select class="ivu-form-item-width" clearable filterable>
                        <Option value="value">label</Option>
                    </Select>
                </Form-item>
                <Form-item label="开户账号">
                    <Input class="ivu-form-item-width" placeholder="请输入开户账号"></Input>
                </Form-item>
                <div class="zlst-form-head-primary"><span>联系人信息</span></div>
                <Form-item label="联系人姓名">
                    <Input class="ivu-form-item-width" placeholder="请输入联系人信息"></Input>
                </Form-item>
                <Form-item label="手机号码">
                    <Input class="ivu-form-item-width" placeholder="请输入手机号码"></Input>
                </Form-item>
                <Form-item label="性别">
                    <Radio-group>
                        <Radio label="1">男</Radio>
                        <Radio label="0">女</Radio>
                    </Radio-group>
                </Form-item>

                <div class="">
                    <Button><label style="color: red;margin-right: 5px;">*</label>上传证件</Button>
                    <br />
                    <span class="zlst-tips-primary">提示：法人身份证上传两面;图片格式为png,jpg,jpeg,大小不要超过2M</span>
                </div>

                <Form-item :label-width="10">
                    <Form-item>
                        <Upload action="">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传营业执照</Button>
                        </Upload>
                        <div class="zlst-form-item-image-wrap">
                            <img class="zlst-form-item-image-thumb" src="http://192.168.10.235:8888//group1/M00/00/08/wKgK9lnFvG6AIa_mAAH89q-4VdM173.jpg" />
                            <div class="zlst-form-item-image-zoom">
                                <img src="http://192.168.10.201:6501/static/img/timg.d2f7788.png" />
                            </div>
                        </div>
                    </Form-item>
                    <Form-item>
                        <Upload action="">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传营业执照</Button>
                        </Upload>
                        <div class="zlst-form-item-image-wrap">
                            <img class="zlst-form-item-image-thumb" src="http://192.168.10.235:8888//group1/M00/00/08/wKgK9lnFvG6AIa_mAAH89q-4VdM173.jpg" />
                            <div class="zlst-form-item-image-zoom">
                                <img src="http://192.168.10.201:6501/static/img/timg.d2f7788.png" />
                            </div>
                        </div>
                    </Form-item>
                    <Form-item>
                        <Upload action="">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传营业执照</Button>
                        </Upload>
                        <div class="zlst-form-item-image-wrap">
                            <img class="zlst-form-item-image-thumb" src="http://192.168.10.235:8888//group1/M00/00/08/wKgK9lnFvG6AIa_mAAH89q-4VdM173.jpg" />
                            <div class="zlst-form-item-image-zoom">
                                <img src="http://192.168.10.201:6501/static/img/timg.d2f7788.png" />
                            </div>
                        </div>
                    </Form-item>
                    <Form-item>
                        <Upload action="">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传营业执照</Button>
                        </Upload>
                        <div class="zlst-form-item-image-wrap">
                            <img class="zlst-form-item-image-thumb" src="http://192.168.10.235:8888//group1/M00/00/08/wKgK9lnFvG6AIa_mAAH89q-4VdM173.jpg" />
                            <div class="zlst-form-item-image-zoom">
                                <img src="http://192.168.10.201:6501/static/img/timg.d2f7788.png" />
                            </div>
                        </div>
                    </Form-item>
                </Form-item>

                <div class="zlst-form-operate">
                    <Button type="info">保存草稿</Button>
                    <Button type="success">提交</Button>
                    <Button type="warning">取消</Button>
                </div>
            </Form>`,
            htmlCode3: `<Row>
                <Col span="12">
                    <Form :label-width="80">
                        <FormItem label="名称">
                            <Input class="ivu-form-item-width-l" placeholder="请输入名称"></Input>
                        </FormItem>

                        <div class="ivu-form-grid-0">
                            <FormItem label="起点">
                                <Form-item>
                                    <Select class="ivu-form-item-width-xs" placeholder="省">
                                        <Option :value="'value1'">label1</Option>
                                    </Select>
                                </Form-item>
                                <Form-item>
                                    <Select class="ivu-form-item-width-xs" placeholder="市">
                                        <Option :value="'value1'">label1</Option>
                                    </Select>
                                </Form-item>
                                <Form-item>
                                    <Select class="ivu-form-item-width-xs" placeholder="区">
                                        <Option :value="'value1'">label1</Option>
                                    </Select>
                                </Form-item>
                                <Form-item>
                                    <Input placeholder="街道" class="ivu-form-item-width-l"></Input>
                                </Form-item>
                            </FormItem>
                        </div>

                        <FormItem label="里程数">
                            <Input class="ivu-form-item-width-l" placeholder="请输入"></Input>
                        </FormItem>
                        <FormItem label="高速">
                            <Select class="ivu-form-item-width-l" clearable placeholder="选择">
                                <Option value="1">是</Option>
                                <Option value="0">否</Option>
                            </Select>
                        </FormItem>
                        <FormItem class="ivu-form-item-width-l" label="备注">
                            <Input class="ivu-form-item-width-l" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
                        </FormItem>
                        <div class="zlst-form-operate">
                            <Button type="primary">保存</Button>
                            <Button type="warning">取消</Button>
                        </div>
                    </Form>
                </Col>
            </Row>`,
                htmlCode4: `<Form :label-width="120" grid="3">
                <div class="ivu-form-grid-1">
                    <Form-item label="车辆归属:">
                        <Radio-group type="button">
                            <Radio label="1">自有</Radio>
                            <Radio label="3">个人</Radio>
                            <Radio label="2">承运商</Radio>
                        </Radio-group>
                    </Form-item>
                    <Form-item label="服务单位:">
                        <Select clearable class="ivu-form-item-width-l">
                            <Option value="value">label</Option>
                        </Select>
                    </Form-item>
                </div>

                <div class="ivu-form-grid-0">
                    <Form-item label="基本参数:">
                        <Form-item>
                            <Input class="ivu-form-item-width-xs" placeholder="额定体积(m3)"></Input>
                        </Form-item>
                        <Form-item :label-width="10">
                            <Input class="ivu-form-item-width-xs" placeholder="额定载重(t)"></Input>
                        </Form-item>
                        <Form-item :label-width="10">
                            <Input class="ivu-form-item-width-xs" placeholder="车长(m)"></Input>
                        </Form-item>
                    </Form-item>
                </div>

                <Button>更多信息</Button>

                <div class="ivu-form-grid-0 car-color">
                    <form-item label="车身颜色:">
                        <Radio-group>
                            <Radio label="白色">
                                <div class="circle1"></div>
                            </Radio>
                            <Radio label="蓝色">
                                <div class="circle2"></div>
                            </Radio>
                            <Radio label="红色">
                                <div class="circle3"></div>
                            </Radio>
                            <Radio label="橙色">
                                <div class="circle4"></div>
                            </Radio>
                            <Radio label="灰色">
                                <div class="circle5"></div>
                            </Radio>
                            <Radio label="金色">
                                <div class="circle6"></div>
                            </Radio>
                            <Radio label="黑色">
                                <div class="circle7"></div>
                            </Radio>
                            <Radio label="褐色">
                                <div class="circle8"></div>
                            </Radio>
                            <Radio label="绿色">
                                <div class="circle9"></div>
                            </Radio>
                            <Radio label="其他">
                                <div class="circle10">其他</div>
                            </Radio>
                        </Radio-group>
                    </form-item>
                    <br>
                    <form-item label="车厢尺寸(M):">
                        <Form-item>
                            <Input placeholder="长(米)"></Input>
                        </Form-item>
                        <Form-item>
                            <Input placeholder="宽(米)"></Input>
                        </Form-item>
                        <Form-item>
                            <Input placeholder="高(米)"></Input>
                        </Form-item>
                    </form-item>
                </div>

                <div class="ivu-form-grid-3">
                    <Form-item label="车架号:">
                        <Input class="ivu-form-item-width" placeholder="请输入"></Input>
                    </Form-item>
                    <Form-item label="准运种类:">
                        <Select class="ivu-form-item-width" clearable>
                            <Option value="value">label</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="整备质量(Kg):">
                        <Input class="ivu-form-item-width" placeholder="请输入"></Input>
                    </Form-item>
                    <Form-item label="发动机功率(匹):">
                        <Input class="ivu-form-item-width" placeholder="请输入"></Input>
                    </Form-item>
                    <Form-item label="燃料类型:">
                        <Select class="ivu-form-item-width" clearable>
                            <Option value="value">label</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="定位系统:">
                        <Radio-group type="button">
                            <Radio label="0">GPS</Radio>
                            <Radio label="1">北斗</Radio>
                        </Radio-group>
                    </Form-item>
                    <br>
                    <Form-item label="设备编号:">
                        <Input class="ivu-form-item-width" placeholder="请输入"></Input>
                    </Form-item>
                    <Form-item label="默认挂车:">
                        <Select class="ivu-form-item-width" clearable>
                            <Option value="licensePlateNumber">licensePlateNumber</Option>
                        </Select>
                    </Form-item>
                </div>

                <div class="ivu-form-grid-2">
                    <Form-item label="主驾司机:">
                        <Select class="ivu-form-item-width">
                            <Option value="value">label</Option>
                        </Select>
                    </Form-item>
                    <Form-item clearable label="主驾司机手机号:">
                        <Input class="ivu-form-item-width" placeholder="请输入电话"></Input>
                    </Form-item>
                    <Form-item label="副驾司机:">
                        <Select class="ivu-form-item-width">
                            <Option value="value">label</Option>
                        </Select>
                    </Form-item>
                    <Form-item clearable label="副驾司机手机号:">
                        <Input class="ivu-form-item-width" placeholder="请输入电话"></Input>
                    </Form-item>
                </div>

                <Button><label style="color: red;margin-right: 5px;">*</label>上传证件</Button>
                <Form-item :label-width="10">
                    <Form-item>
                        <Upload action="">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传营业执照</Button>
                        </Upload>
                        <div class="zlst-form-item-image-wrap">
                            <img class="zlst-form-item-image-thumb" src="http://192.168.10.235:8888//group1/M00/00/08/wKgK9lnFvG6AIa_mAAH89q-4VdM173.jpg" />
                            <div class="zlst-form-item-image-zoom">
                                <img src="http://192.168.10.201:6501/static/img/timg.d2f7788.png" />
                            </div>
                        </div>
                    </Form-item>
                    <Form-item>
                        <Upload action="">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传营业执照</Button>
                        </Upload>
                        <div class="zlst-form-item-image-wrap">
                            <img class="zlst-form-item-image-thumb" src="http://192.168.10.235:8888//group1/M00/00/08/wKgK9lnFvG6AIa_mAAH89q-4VdM173.jpg" />
                            <div class="zlst-form-item-image-zoom">
                                <img src="http://192.168.10.201:6501/static/img/timg.d2f7788.png" />
                            </div>
                        </div>
                    </Form-item>
                    <Form-item>
                        <Upload action="">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传营业执照</Button>
                        </Upload>
                        <div class="zlst-form-item-image-wrap">
                            <img class="zlst-form-item-image-thumb" src="http://192.168.10.235:8888//group1/M00/00/08/wKgK9lnFvG6AIa_mAAH89q-4VdM173.jpg" />
                            <div class="zlst-form-item-image-zoom">
                                <img src="http://192.168.10.201:6501/static/img/timg.d2f7788.png" />
                            </div>
                        </div>
                    </Form-item>
                </Form-item>
                <div class="zlst-form-operate">
                    <Button type="primary">保存草稿</Button>
                    <Button type="success">提交</Button>
                    <Button type="warning">重置</Button>
                </div>
            </Form>`,

            }
        },
        mounted: function () {
            window.setTimeout(function () {
                $('.logistics-layout-form pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 0);
        }
    }
</script>

